<template>
  <div class="container">
    <navbar theme="transparent" fixed="true"></navbar>
    <slider auto-play="false" infinite="false"
            :style="{ height: height}">
      <div v-for="(url) in imageList" v-bind:key="url"
           :style="{ height: height + 'px'}">
        <image resize="contain"
               @click="imageClick"
               :src="url"
               :style="{ height: height + 'px', width: width + 'px'}"></image>
      </div>
      <indicator class="slider-indicator"></indicator>
    </slider>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";

  .container {
    background-color: $body-bg;
    transition: transform .3s linear
  }

  .slider-indicator {
    height: 40px;
    item-color: white;
    item-selected-color: #fb4748;
    item-size: 20px;
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
  }
</style>
<script>
let queryParser = require('./include/queryparser')
let navigator = require('./include/xnavigator')
module.exports = {
  mixins: [],
  components: {
    navbar: require('./components/navbar.vue')
  },
  data () {
    return {
      imageList: [],
      height: weex.config.env.deviceHeight * 750 / weex.config.env.deviceWidth,
      width: 750
    }
  },
  created () {
    var params = queryParser(weex.config.bundleUrl)
    // modal.alert({message: params.imageList})
    this.imageList = JSON.parse(params.imageList)
  },
  methods: {
    imageClick () {
      navigator.pop()
    }
  }
}
</script>
